iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 5
0
自我挑戰組

網頁設計初學之路系列 第 5

Day05.用清單編列資訊吧

  • 分享至 

  • xImage
  •  

網頁的清單:

<body>
 <ol> 
  <li>東方</li>
  <li>西方</li>
  <li type=”a”>南方</li>
  <li type=”i”>北方</li>
 </ol>
 <ul> 
  <li>春天</li>
  <li>夏天</li>
  <li type=”circle”>秋天</li>
  <li type=”square”>冬天</li>
 </ul>
</body>

https://ithelp.ithome.com.tw/upload/images/20190921/20120458dPq7mmzA5o.png
<ol>
為編號式的清單,預設樣式為數字,可利用屬性type更改成其他樣式。不過如果學完CSS後,都是通過CSS做更改的。
<ul>
為項目式的清單,預設樣式為圓點(disc),也是利用屬性type更改,有圓圈(circle)及方塊(square)樣式。
<li>
清單裡的項目。

<body>
 <dl>
  <dt>名詞甲</dt>
   <dd>定義1</dd>
  <dt>名詞乙</dt>
   <dd>定義1</dd>
   <dd>定義2</dd>
 </dl>
</body>

https://ithelp.ithome.com.tw/upload/images/20190921/20120458wiz25p8QT7.png
<dl>
為定義清單,通常由一系列的名詞及定義所組成。
<dt>
放需被解釋定義的名詞。
<dd>
放其名詞的定義。

<body>
 <ul>
  <li>桌電</li>
  <li>手機
     <ul>
      <li>蘋果</li>
      <li>三星</li>
     </ul>
  </li>
  <li>筆電</li>
 </ul>
</body>

https://ithelp.ithome.com.tw/upload/images/20190921/20120458iusEivmxhf.png
巢狀清單
再項目中放入一個或更多次清單,預設中次清單的樣式會跟主清單不同。


上一篇
Day04.打文字可是基礎中的基礎(二)
系列文
網頁設計初學之路5
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言